<!--
 * @Description: 关联设备
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-12 17:39:28
 * @LastEditTime: 2021-11-13 20:01:09
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="relevance-box">
    <!-- 判断设备类型：POP - 无开局、无高可用；CPE - 有开局、有高可用； PON - 有开局、无高可用；HUB - 无开局、无高可用；-->
    <template v-if="row.siteType === 'POP'">
      <!-- 判断是否关联设备 -->
      <template v-if="row.nes.length === 0">
        <el-button
          type="text"
          icon="el-icon-connection"
          @click="relevance('ONE', row)"
          v-power="row.dgId === 100000 ? 0 : 2"
        >关联设备</el-button>
      </template>
      <template v-else>
        <el-popover trigger="click" placement="top">
          <p>ID: {{ row.nes[0].ne.id }}</p>
          <p>名称: {{ row.nes[0].ne.userlabel }}</p>
          <p>类型: {{ row.nes[0].ne.typeLabel }} - {{row.nes[0].ne.subTypeLabel}}</p>
          <div v-show="row.nes[0].ne.managementState === 'ONLINE'">
            <span v-if="row.nes[0].ne.connectionState === 'CONNECTED'">
              状态：
              <i class="i-success"></i>链接
            </span>
            <span v-if="row.nes[0].ne.connectionState === 'DISCONNECTED'">
              状态：
              <i class="i-error"></i>断链
            </span>
          </div>
          <span v-show="row.nes[0].ne.connectionState === 'UNKNOWN'">
            状态：
            <i class="i-warning"></i>未知
          </span>
          <el-button
            type="text"
            icon="el-icon-video-play"
            @click="issue('ONE', row)"
            v-show="neStatus(row.nes[0])"
            v-power="row.dgId === 100000 ? 0 : 2"
          >{{row.nes[0].siteWithNeOperationStatus === 3 ? '配置下发' : '配置更新'}}</el-button>
          <el-button
            type="text"
            icon="el-icon-link"
            @click="remove('ONE', row)"
            style="margin-left: 0;"
            v-power="row.dgId === 100000 ? 0 : 2"
          >设备解绑</el-button>
          <div slot="reference" class="name-wrapper">
            <el-tag
              size="medium"
              :type="neStatus(row.nes[0]) ? 'info' : 'success'"
            >{{row.nes[0].ne.userlabel}}</el-tag>
          </div>
        </el-popover>
      </template>
    </template>
    <!-- 判断CPE、PON类型 -->
    <template v-if="row.siteType === 'CPE' && row.subSiteType !== 'HUB'">
      <!-- 判断高可用 -->
      <template v-if="row.ha">
        <!-- 判断是否关联 -->
        <template v-if="row.nes.length === 0">
          <template v-if="one">
            <el-button
              type="text"
              icon="el-icon-connection"
              @click="relevance('ONE', row)"
              v-power="row.dgId === 100000 ? 0 : 2"
            >网关1 - 关联设备</el-button>
          </template>
          <template v-if="!one">
            <el-button
              type="text"
              icon="el-icon-message"
              @click="email('ONE', row)"
              v-power="row.dgId === 100000 ? 0 : 2"
            >网关1 - 邮件开局</el-button>
          </template>
          <template v-if="two">
            <el-button
              type="text"
              icon="el-icon-connection"
              @click="relevance('TWO', row)"
              style="margin-left: 0;"
              v-power="row.dgId === 100000 ? 0 : 2"
            >网关2 - 关联设备</el-button>
          </template>
          <template v-if="!two">
            <el-button
              type="text"
              icon="el-icon-message"
              @click="email('TWO', row)"
              style="margin-left: 0;"
              v-power="row.dgId === 100000 ? 0 : 2"
            >网关2 - 邮件开局</el-button>
          </template>
        </template>
        <!-- 关联设备一个 -->
        <template v-if="row.nes.length === 1">
          <div v-for="(item, index) in row.nes" :key="index">
            <div v-if="item.standByRelation === 'ONE'">
              <el-popover trigger="click" placement="top" style="float: left;">
                <p>ID: {{ row.nes[0].ne.id }}</p>
                <p>名称: {{ row.nes[0].ne.userlabel }}</p>
                <p>类型: {{ row.nes[0].ne.typeLabel }} - {{row.nes[0].ne.subTypeLabel}}</p>
                <div v-show="row.nes[0].ne.managementState === 'ONLINE'">
                  <span v-if="row.nes[0].ne.connectionState === 'CONNECTED'">
                    状态：
                    <i class="i-success"></i>链接
                  </span>
                  <span v-if="row.nes[0].ne.connectionState === 'DISCONNECTED'">
                    状态：
                    <i class="i-error"></i>断链
                  </span>
                </div>
                <span v-show="row.nes[0].ne.connectionState === 'UNKNOWN'">
                  状态：
                  <i class="i-warning"></i>未知
                </span>
                <el-button
                  type="text"
                  icon="el-icon-video-play"
                  @click="issue('ONE', row)"
                  v-power="row.dgId === 100000 ? 0 : 2"
                  v-show="neStatus(row.nes[0])"
                >网关1 - {{row.nes[0].siteWithNeOperationStatus === 3 ? '配置下发' : '配置更新'}}</el-button>
                <el-button
                  type="text"
                  icon="el-icon-link"
                  @click="remove('ONE', row)"
                  style="margin-left: 0;"
                  v-power="row.dgId === 100000 ? 0 : 2"
                >网关1 - 设备解绑</el-button>
                <div slot="reference" class="name-wrapper">
                  <el-tag
                    size="medium"
                    :type="neStatus(row.nes[0]) ? 'info' : 'success'"
                  >{{row.nes[0].ne.userlabel}}</el-tag>
                </div>
              </el-popover>
              <template v-if="two">
                <el-button
                  type="text"
                  icon="el-icon-connection"
                  style="float: right;"
                  @click="relevance('TWO', row)"
                  v-power="row.dgId === 100000 ? 0 : 2"
                >网关2 - 关联设备</el-button>
              </template>
              <template v-if="!two">
                <el-button
                  type="text"
                  icon="el-icon-message"
                  style="float: right;"
                  @click="email('TWO', row)"
                  v-power="row.dgId === 100000 ? 0 : 2"
                >网关2 - 邮件开局</el-button>
              </template>
            </div>
            <div v-if="item.standByRelation === 'TWO'">
              <template v-if="one">
                <el-button
                  type="text"
                  icon="el-icon-connection"
                  style="float: left;"
                  @click="relevance('ONE', row)"
                  v-power="row.dgId === 100000 ? 0 : 2"
                >网关1 - 关联设备</el-button>
              </template>
              <template v-if="!one">
                <el-button
                  type="text"
                  icon="el-icon-message"
                  style="float: left;"
                  @click="email('ONE', row)"
                  v-power="row.dgId === 100000 ? 0 : 2"
                >网关1 - 邮件开局</el-button>
              </template>
              <el-popover trigger="click" placement="top" style="float: right;">
                <p>ID: {{ row.nes[0].ne.id }}</p>
                <p>名称: {{ row.nes[0].ne.userlabel }}</p>
                <p>类型: {{ row.nes[0].ne.typeLabel }} - {{row.nes[0].ne.subTypeLabel}}</p>
                <div v-show="row.nes[0].ne.managementState === 'ONLINE'">
                  <span v-if="row.nes[0].ne.connectionState === 'CONNECTED'">
                    状态：
                    <i class="i-success"></i>链接
                  </span>
                  <span v-if="row.nes[0].ne.connectionState === 'DISCONNECTED'">
                    状态：
                    <i class="i-error"></i>断链
                  </span>
                </div>
                <span v-show="row.nes[0].ne.connectionState === 'UNKNOWN'">
                  状态：
                  <i class="i-warning"></i>未知
                </span>
                <el-button
                  type="text"
                  icon="el-icon-video-play"
                  @click="issue('TWO', row)"
                  v-power="row.dgId === 100000 ? 0 : 2"
                  v-show="neStatus(row.nes[0])"
                >网关2 - {{row.nes[0].siteWithNeOperationStatus === 3 ? '配置下发' : '配置更新'}}</el-button>
                <el-button
                  type="text"
                  icon="el-icon-link"
                  @click="remove('TWO', row)"
                  style="margin-left: 0;"
                  v-power="row.dgId === 100000 ? 0 : 2"
                >网关2 - 设备解绑</el-button>
                <div slot="reference" class="name-wrapper">
                  <el-tag
                    size="medium"
                    :type="neStatus(row.nes[0]) ? 'info' : 'success'"
                  >{{row.nes[0].ne.userlabel}}</el-tag>
                </div>
              </el-popover>
            </div>
          </div>
        </template>
        <!-- 关联设备两个 -->
        <template v-if="row.nes.length === 2">
          <div v-for="(item, index) in row.nes" :key="index">
            <div v-if="item.standByRelation === 'ONE'">
              <el-popover trigger="click" placement="top" style="float: left;">
                <p>ID: {{ item.ne.id }}</p>
                <p>名称: {{ item.ne.userlabel }}</p>
                <p>类型: {{ item.ne.typeLabel }} - {{item.ne.subTypeLabel}}</p>
                <div v-show="item.ne.managementState === 'ONLINE'">
                  <span v-if="item.ne.connectionState === 'CONNECTED'">
                    状态：
                    <i class="i-success"></i>链接
                  </span>
                  <span v-if="item.ne.connectionState === 'DISCONNECTED'">
                    状态：
                    <i class="i-error"></i>断链
                  </span>
                </div>
                <span v-show="item.ne.connectionState === 'UNKNOWN'">
                  状态：
                  <i class="i-warning"></i>未知
                </span>
                <el-button
                  type="text"
                  icon="el-icon-video-play"
                  @click="issue('ONE', row)"
                  v-power="row.dgId === 100000 ? 0 : 2"
                  v-show="neStatus(item)"
                >网关1 - {{item.siteWithNeOperationStatus === 3 ? '配置下发' : '配置更新'}}</el-button>
                <el-button
                  type="text"
                  icon="el-icon-link"
                  @click="remove('ONE', row)"
                  style="margin-left: 0;"
                  v-power="row.dgId === 100000 ? 0 : 2"
                >网关1 - 设备解绑</el-button>
                <div slot="reference" class="name-wrapper">
                  <el-tag
                    size="medium"
                    :type="neStatus(item) ? 'info' : 'success'"
                  >{{item.ne.userlabel}}</el-tag>
                </div>
              </el-popover>
            </div>
            <div v-if="item.standByRelation === 'TWO'">
              <el-popover trigger="click" placement="top" style="float: right;">
                <p>ID: {{ item.ne.id }}</p>
                <p>名称: {{ item.ne.userlabel }}</p>
                <p>类型: {{ item.ne.typeLabel }} - {{item.ne.subTypeLabel}}</p>
                <div v-show="item.ne.managementState === 'ONLINE'">
                  <span v-if="item.ne.connectionState === 'CONNECTED'">
                    状态：
                    <i class="i-success"></i>链接
                  </span>
                  <span v-if="item.ne.connectionState === 'DISCONNECTED'">
                    状态：
                    <i class="i-error"></i>断链
                  </span>
                </div>
                <span v-show="item.ne.connectionState === 'UNKNOWN'">
                  状态：
                  <i class="i-warning"></i>未知
                </span>
                <el-button
                  type="text"
                  icon="el-icon-video-play"
                  @click="issue('TWO', row)"
                  v-power="row.dgId === 100000 ? 0 : 2"
                  v-show="neStatus(item)"
                >网关2 - {{item.siteWithNeOperationStatus === 3 ? '配置下发' : '配置更新'}}</el-button>
                <el-button
                  type="text"
                  icon="el-icon-link"
                  @click="remove('TWO', row)"
                  style="margin-left: 0;"
                  v-power="row.dgId === 100000 ? 0 : 2"
                >网关2 - 设备解绑</el-button>
                <div slot="reference" class="name-wrapper">
                  <el-tag
                    size="medium"
                    :type="neStatus(item) ? 'info' : 'success'"
                  >{{item.ne.userlabel}}</el-tag>
                </div>
              </el-popover>
            </div>
          </div>
        </template>
      </template>
      <template v-else>
        <template v-if="row.nes.length === 0">
          <template v-if="one">
            <el-button
              type="text"
              icon="el-icon-connection"
              @click="relevance('ONE', row)"
              v-power="row.dgId === 100000 ? 0 : 2"
            >关联设备</el-button>
          </template>
          <template v-if="!one">
            <el-button
              type="text"
              icon="el-icon-message"
              @click="email('ONE', row)"
              v-power="row.dgId === 100000 ? 0 : 2"
            >邮件开局</el-button>
          </template>
        </template>
        <template v-else>
          <el-popover trigger="click" placement="top">
            <p>ID: {{ row.nes[0].ne.id }}</p>
            <p>名称: {{ row.nes[0].ne.userlabel }}</p>
            <p>类型: {{ row.nes[0].ne.typeLabel }} - {{row.nes[0].ne.subTypeLabel}}</p>
            <div v-show="row.nes[0].ne.managementState === 'ONLINE'">
              <span v-if="row.nes[0].ne.connectionState === 'CONNECTED'">
                状态：
                <i class="i-success"></i>链接
              </span>
              <span v-if="row.nes[0].ne.connectionState === 'DISCONNECTED'">
                状态：
                <i class="i-error"></i>断链
              </span>
            </div>
            <span v-show="row.nes[0].ne.connectionState === 'UNKNOWN'">
              状态：
              <i class="i-warning"></i>未知
            </span>
            <el-button
              type="text"
              icon="el-icon-video-play"
              @click="issue('ONE', row)"
              v-power="row.dgId === 100000 ? 0 : 2"
              v-show="neStatus(row.nes[0])"
            >{{row.nes[0].siteWithNeOperationStatus === 3 ? '配置下发' : '配置更新'}}</el-button>
            <el-button
              type="text"
              icon="el-icon-link"
              @click="remove('ONE', row)"
              style="margin-left: 0;"
              v-power="row.dgId === 100000 ? 0 : 2"
            >设备解绑</el-button>
            <div slot="reference" class="name-wrapper">
              <el-tag
                size="medium"
                :type="neStatus(row.nes[0]) ? 'info' : 'success'"
              >{{row.nes[0].ne.userlabel}}</el-tag>
            </div>
          </el-popover>
        </template>
      </template>
    </template>
    <!-- 判断CPE、PON类型 -->
    <template v-if="row.siteType === 'CPE' && row.subSiteType === 'HUB'">
      <template v-if="row.nes.length === 0">
        <template v-if="!one">
          <el-button
            type="text"
            icon="el-icon-connection"
            @click="relevance('ONE', row)"
            v-power="row.dgId === 100000 ? 0 : 2"
          >关联设备</el-button>
        </template>
      </template>
      <template v-else>
        <el-popover trigger="click" placement="top">
          <p>ID: {{ row.nes[0].ne.id }}</p>
          <p>名称: {{ row.nes[0].ne.userlabel }}</p>
          <p>类型: {{ row.nes[0].ne.typeLabel }} - {{row.nes[0].ne.subTypeLabel}}</p>
          <div v-show="row.nes[0].ne.managementState === 'ONLINE'">
            <span v-if="row.nes[0].ne.connectionState === 'CONNECTED'">
              状态：
              <i class="i-success"></i>链接
            </span>
            <span v-if="row.nes[0].ne.connectionState === 'DISCONNECTED'">
              状态：
              <i class="i-error"></i>断链
            </span>
          </div>
          <span v-show="row.nes[0].ne.connectionState === 'UNKNOWN'">
            状态：
            <i class="i-warning"></i>未知
          </span>
          <el-button
            type="text"
            icon="el-icon-video-play"
            @click="issue('ONE', row)"
            v-power="row.dgId === 100000 ? 0 : 2"
            v-show="neStatus(row.nes[0])"
          >{{row.nes[0].siteWithNeOperationStatus === 3 ? '配置下发' : '配置更新'}}</el-button>
          <el-button
            type="text"
            icon="el-icon-link"
            @click="remove('ONE', row)"
            style="margin-left: 0;"
            v-power="row.dgId === 100000 ? 0 : 2"
          >设备解绑</el-button>
          <div slot="reference" class="name-wrapper">
            <el-tag
              size="medium"
              :type="neStatus(row.nes[0]) ? 'info' : 'success'"
            >{{row.nes[0].ne.userlabel}}</el-tag>
          </div>
        </el-popover>
      </template>
    </template>
    <!-- 邮件开局 -->
    <el-dialog
      v-if="emailStart"
      title="邮件开局"
      :close-on-click-modal="false"
      width="500px"
      :visible.sync="emailStart"
    >
      <el-form ref="emailForm" :model="emailForm" :rules="emailRules" label-width="100px">
        <!-- WAN口 -->
        <el-form-item label="广域网端口" prop="wan">
          <el-select v-model="emailForm.wan" style="width: 100%;">
            <el-option
              v-for="(item, index) in wanls"
              :key="index"
              :value="item.name"
              :label="item.alias"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="emailForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="emailStart = false" style="padding: 5px;">取消</el-button>
        <el-button type="primary" @click="submitEmail" style="padding: 5px;">确认</el-button>
      </span>
    </el-dialog>
    <!-- 设备关联 -->
    <el-dialog
      v-if="deviceAssociation"
      title="设备关联"
      :close-on-click-modal="false"
      width="590px"
      :visible.sync="deviceAssociation"
    >
      <relation ref="relNe" :row="row" @handleSelNe="handleSelNe" />
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="deviceAssociation = false" style="padding: 5px;">取消</el-button>
        <el-button type="primary" @click="submitDevice" style="padding: 5px;">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 设备关联
import relation from './relation';
export default {
  components: {
    relation
  },
  created () {
    this.filterWans();
  },
  props: ['row'],
  data () {
    return {
      one: null,
      two: null,
      emailStart: false,
      emailForm: {
        wan: null,
        email: this.$store.state.user.user.info.email ? this.$store.state.user.user.info.email : null
      },
      wanls: [],
      emailRules: {
        wan: [{ required: true, message: '请选择广域网端口', trigger: 'change' }],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      },
      deviceAssociation: false,
      selNeId: null,
      level: null
    };
  },
  methods: {
    // 过滤配置下发、配置更新按钮是否显示
    neStatus (ne) {
      if (ne.update) {
        if (ne.siteWithNeOperationStatus === 6) {
          return true;
        }
        if (ne.siteWithNeOperationStatus === 7) {
          return true;
        }
      } else {
        if (ne.siteWithNeOperationStatus === 3) {
          return true;
        }
        if (ne.siteWithNeOperationStatus === 6) {
          return false;
        }
        if (ne.siteWithNeOperationStatus === 7) {
          return false;
        }
      }
    },
    // 过滤WAN侧是否被关联，区分高可用、非高可用
    filterWans () {
      let _this = this;
      let wans = _this.row.wans;
      let oneOpen = [];
      let twoOpen = [];
      for (let i = 0; i < wans.length; i++) {
        if (_this.row.ha) {
          if (wans[i].standByRelation === 'ONE') {
            oneOpen.push(wans[i].selectedAddressAcquisition);
          }
          if (wans[i].standByRelation === 'TWO') {
            twoOpen.push(wans[i].selectedAddressAcquisition);
          }
        } else {
          if (wans[i].standByRelation === 'ONE') {
            oneOpen.push(wans[i].selectedAddressAcquisition);
          }
        }
      }
      if (_this.row.ha) {
        if (oneOpen.indexOf(true) > -1) {
          _this.one = true;
        } else {
          _this.one = false;
        }
        if (twoOpen.indexOf(true) > -1) {
          _this.two = true;
        } else {
          _this.two = false;
        }
      } else {
        if (oneOpen.indexOf(true) > -1) {
          _this.one = true;
        } else {
          _this.one = false;
        }
        _this.two = null;
      }
    },
    // 邮件开局
    email (lv, data) {
      let _this = this;
      let arry = [];
      for (let i = 0; i < data.wans.length; i++) {
        if (data.wans[i].standByRelation === lv) {
          arry.push(data.wans[i]);
        }
      }
      _this.wanls = arry;
      _this.emailStart = true;
    },
    // 提交邮件开局
    submitEmail () {
      let _this = this;
      _this.$refs['emailForm'].validate((valid) => {
        if (valid) {
          let relWan = _this.wanls.find(item => {
            return item.name === _this.emailForm.wan;
          });
          let params = {
            id: _this.row.id,
            neType: _this.row.neType,
            sitename: _this.row.sitename,
            orgId: _this.row.orgId,
            orgName: _this.row.extAttrs.orgName,
            neIpType: _this.row.neIpType,
            wanList: [{
              alias: relWan.alias,
              name: relWan.name,
              ip: relWan.ip,
              gatewayIp: relWan.gatewayIp,
              standByRelation: relWan.standByRelation,
              addressAcquisition: relWan.addressAcquisition
            }],
            email: _this.emailForm.email
          };
          _this.$http.post({
            url: '/api/sdwan/site/email',
            data: params,
            loading: true
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              _this.emailStart = false;
              _this.$message.success('邮件开局成功！');
              _this.$emit('refresh');
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    },
    // 关联设备
    relevance (lv, data) {
      let _this = this;
      // 过滤掉的设备
      _this.level = lv;
      _this.row = data;
      _this.deviceAssociation = true;
      _this.$refs['relNe'].refresh();
    },
    // 关联设备 - 回调
    handleSelNe (val) {
      let _this = this;
      _this.selNeId = val;
    },
    // 提交设备关联
    submitDevice () {
      let _this = this;
      if (_this.selNeId) {
        let params = {
          id: _this.row.id,
          devId: [{
            neId: _this.selNeId,
            standByRelation: _this.level
          }]
        };
        _this.$http.post({
          url: '/api/sdwan/site/related/' + params.id,
          data: params.devId,
          loading: true
        }).then(res => {
          let { status } = res;
          if (status === '0') {
            _this.deviceAssociation = false;
            _this.$message.success('设备关联成功！');
            _this.$emit('refresh');
          }
        });
      } else {
        _this.$message.info('请选择需要关联的设备！');
      }
    },
    // 配置更新、下发
    issue (lv, data) {
      let _this = this;
      let ne = data.nes.find(item => {
        return lv === item.standByRelation;
      });
      let params = {
        siteId: _this.row.id,
        neId: ne.neId,
        isUpdate: ne.update
      };
      _this.$confirm('您确定要进行设备配置吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$http.post({
          url: '/api/sdwan/site/setting/issue',
          data: params,
          loading: true
        }).then(res => {
          let { status } = res;
          if (status === '0') {
            _this.$message.success('配置成功！');
            _this.$emit('refresh');
          }
        });
      }).catch(() => {
        _this.$message.info('取消配置');
      });
    },
    // 设备解绑
    remove (lv, data) {
      let _this = this;
      let ne = data.nes.find(item => {
        return lv === item.standByRelation;
      });
      _this.$confirm('您确定要解绑当前设备吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$http.post({
          url: '/api/sdwan/site/disassociate/' + data.id,
          data: [ne.neId],
          loading: true
        }).then(res => {
          let { status } = res;
          if (status === '0') {
            _this.$message.success('解绑成功！');
            _this.$emit('refresh');
          }
        });
      }).catch(() => {
        _this.$message.info('取消解绑');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.i-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e8eaec;
  position: relative;
  top: 1px;
}
.i-success {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #19be6b;
  position: relative;
  top: 1px;
}
.i-error {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ed4014;
  position: relative;
  top: 1px;
}
.i-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f90;
  position: relative;
  top: 1px;
}
.relevance-box {
  position: relative;
  top: 4px;
  ::v-deep .el-tag {
    width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  ::v-deep .el-button {
    line-height: 28px;
    width: 155px;
  }
  ::v-deep .el-dialog {
    text-align: left;
    .el-button {
      width: 90px;
    }
  }
}
</style>